<template>
  <div id="app">
    <Tabbar v-if="!$route.meta.hideTab"></Tabbar>
    <keep-alive>
      <router-view
        v-if="!$route.meta.notKeepAlive"
        :style="{ 'padding-bottom': $route.meta.hideTab ? '' : '1.33333rem' }"
      />
    </keep-alive>
    <router-view
      v-if="$route.meta.notKeepAlive"
      :style="{ 'padding-bottom': $route.meta.hideTab ? '' : '1.33333rem' }"
    ></router-view>
    <van-overlay :show="showLoading" z-index="9999">
      <div class="wrapper">
        <van-loading size="50px" color="#25c9c3"></van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import Tabbar from "@/components/Tabbar";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["showLoading"]),
  },
  components: {
    Tabbar,
  },
};
</script>

<style lang="less" scoped>
.van-overlay {
  background-color: rgba(255, 255, 255, 0.5);
  .wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
